<template>
  <el-tree
    :data="store.roleRoutes"
    :props="defaultProps"
    highlight-current
    node-key="path"
    :current-node-key="currentNode"
    @node-click="onNodeClick"
    accordion
    empty-text="加载菜单中..."
    ref="treeRef"
    :render-after-expand="false"
  />
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue';
import { RouteRecordRaw, useRoute, useRouter } from 'vue-router';
import { useUserStore } from '../../store/user';
const store = useUserStore();
const router = useRouter();
const route = useRoute();
const treeRef = ref();

//根据当前路由设置菜单激活的节点
const currentNode = computed(() => {
  return route.fullPath;
});

const onNodeClick = (data: RouteRecordRaw) => {
  // treeRef.value.setCheckedKeys([data.path], false);
  if (data.component) {
    router.push(data.path);
    localStorage.setItem('menuPath',data.path);
  }
};

const setTreeLabel = (data: any, node: any) => {
  return data.meta.title;
};

const defaultProps = {
  children: 'children',
  label: setTreeLabel,
};
</script>

<style lang="scss" scoped>
//基本样式
:deep(.el-tree-node__content) {
  background-color: var(--lighter-color);
  color: var(--font-color);
  height: 46px;
  transition: all 0.3s ease;
  user-select: none;
}
//当数据为空时的样式
:deep(.el-tree__empty-block) {
  background-color: var(--lighter-color);
  color: var(--font-color);
}
//设置选中时样式
:deep(.is-current > .el-tree-node__content) {
  background-color: var(--active-color) !important;
}
//设置点击时的样式，解决选中时闪白背景问题
:deep(.el-tree-node:focus > .el-tree-node__content) {
  background-color: var(--active-color) !important;
}
</style>
